<template>
  <div>
    <div>
      <h1>
        {{ title }}
      </h1>
    </div>
    <div class="infos">
      <span>大小：{{ size }}</span>
      <span>行数：{{ count }}</span>
      <span>拥有者：{{ owner }}</span>
      <span>创建时间：{{ createTime }}</span>
      <span>数据源类型：{{ importType }}</span>
    </div>
    <div>
      <dataset-preview-table
        v-if="datasetInfo"
        :head="datasetInfo ? datasetInfo.head : []"
        :data="datasetInfo ? datasetInfo.data : []"
        :height="previewTableHeight"
        data-type="table"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import DatasetPreviewTable from '@/components/data/DatasetPreviewTable.vue'

@Component({
  components: {
    DatasetPreviewTable,
  },
})
export default class DatasetInfoModal extends Vue {
  @Prop() datasetInfo!: any

  public get title() {
    if (this.datasetInfo) {
      return this.datasetInfo.name
    }
    return ''
  }

  public get size() {
    return this.datasetInfo ? this.datasetInfo.size : ''
  }

  public get count() {
    return this.datasetInfo ? this.datasetInfo.count : ''
  }

  public get owner() {
    return this.datasetInfo ? this.datasetInfo.owner : ''
  }

  public get createTime() {
    if (!this.datasetInfo) {
      return ''
    }
    const year = this.datasetInfo.createTime.slice(0, 4)
    const month = Number.parseInt(
      this.datasetInfo.createTime.slice(5, 7),
      10
    ).toString()
    const day = Number.parseInt(
      this.datasetInfo.createTime.slice(8, 10),
      10
    ).toString()
    return `${year}/${month}/${day}`
  }

  public get importType() {
    return this.datasetInfo ? this.datasetInfo.type : ''
  }
}
</script>

<style lang="less" scoped>
.infos span {
  margin-right: 20px;
}
</style>
